<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>尚品汇</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div id="wrap">
        <header id="header">
            <div class="header-top">
                <div class="header-top-content">
                    <div class="header-top-l">
                        <span>欢迎来到尚品汇！ 请</span><a href="#">登录</a>
                        <a href="#">注册</a>
                    </div>
                    <div class="header-top-r">
                        <a href="#">我的订单</a>
                        <a href="#">我的订单</a>
                        <a href="#">我的订单</a>
                        <a href="#">我的订单</a>
                        <a href="#">我的订单</a>
                        <a href="#">我的订单</a>
                        <a href="#">我的订单</a>
                        <a href="#">我的订单</a>
                    </div>
                </div>
            </div>
            <div class="header-bottom">
                <h1 id="logo"><a href="#"><img src="./images/Logo.png" alt="文件介绍"></a></h1>
                <div class="search">
                    <input type="text" name="" id="" placeholder="请输入搜索内容">
                    <input type="button" name="" id="" value="搜索">
                </div>
            </div>
        </header>
        <nav id="nav">
            <div class="nav-content">
                <h3><a href="#">全部商品分类</a></h3>
                <ul>
                    <li><a href="#">服装城</a></li>
                    <li><a href="#">服装城</a></li>
                    <li><a href="#">服装城</a></li>
                    <li><a href="#">服装城</a></li>
                    <li><a href="#">服装城</a></li>
                    <li><a href="#">服装城</a></li>
                </ul>
            </div>
        </nav>
        <div id="content">
            <!-- 面包屑导航 -->
            <div class="nav-path">
                <!-- <a href="#">手机数码</a>
                <span>/</span>
                <a href="#">手机</a>
                <span>/</span>
                <a href="#">Apple苹果</a>
                <span>/</span>
                <a >iphone 6S系</a> -->
            </div>
            <div class="good-picAdetail">
                <div class="good-picAdetail-l">
                    <div class="s-pic-box">
                        <img src="./images/s1.png" alt="">
                    </div>
                    <div class="pic-list">
                        <a class="prev" href="javascript:void(0);">&lt;</a>
                        <div class="ul-client">
                            <ul>
                                <!-- <li><img src="./images/s1.png" alt=""></li>
                                <li><img src="./images/s2.png" alt=""></li>
                                <li><img src="./images/s3.png" alt=""></li>
                                <li><img src="./images/s1.png" alt=""></li>
                                <li><img src="./images/s2.png" alt=""></li>
                                <li><img src="./images/s3.png" alt=""></li>
                                <li><img src="./images/s1.png" alt=""></li>
                                <li><img src="./images/s2.png" alt=""></li>
                                <li><img src="./images/s3.png" alt=""></li>
                                <li><img src="./images/s3.png" alt=""></li> -->
                            </ul>
                        </div>
                        <a class="next">&gt;</a>
                    </div>
                </div>
                <div class="good-picAdetail-r">
                </div>
            </div>
            <div class="good-detail-bottom">
                <div class="good-detail-bottom-l">
                    <div class="tab-btn-box">
                        <i class="tab-btn active">相关分类</i>
                        <i class="tab-btn">推荐品牌</i>
                    </div>
                    <div class="tab-con-box">
                        <div class="tab" style="display: block;">
                            <ul class="good-list1">
                                <li>手机</li>
                                <li>手机壳</li>
                                <li>内存卡</li>
                                <li>iphone配件</li>
                                <li>贴膜</li>
                                <li>手机耳机</li>
                                <li>移动电源</li>
                                <li>平板电脑</li>
                            </ul>
                            <ul class="good-list2">
                                <li>
                                    <img src="./images/part01.png" alt="">
                                    <h4>Apple苹果iPhone 6s (A1699)</h4>
                                    <p>¥6088.00</p>
                                    <a href="#">加入购物车</a>
                                </li>
                                <li>
                                    <img src="./images/part01.png" alt="">
                                    <h4>Apple苹果iPhone 6s (A1699)</h4>
                                    <p>¥6088.00</p>
                                    <a href="#">加入购物车</a>
                                </li>
                                <li>
                                    <img src="./images/part01.png" alt="">
                                    <h4>Apple苹果iPhone 6s (A1699)</h4>
                                    <p>¥6088.00</p>
                                    <a href="#">加入购物车</a>
                                </li>
                            </ul>
                        </div>
                        <div class="tab">推荐品牌内容</div>
                    </div>
                </div>
                <div class="good-detail-bottom-r">
                    <div class="good-detail-bottom-choose-box">
                        <h5>选择搭配</h5>
                        <div class="good-detail-bottom-choose-box-bot">
                            <ul>
                                <li>
                                    <img src="./images/l-m01.png" alt="">
                                    <p>￥<i>5299</i></p>
                                    <em>+</em>
                                </li>
                                <li>
                                    <img src="./images/dp01.png" alt="">
                                    <p>Feless费勒斯VR</p>
                                    <label for="check2">
                                        <input type="checkbox" id="check2" value="50">
                                        <span>50</span>
                                    </label>
                                </li>
                                <li>
                                    <img src="./images/dp02.png" alt="">
                                    <p>Feless费勒斯VR</p>
                                    <label for="check3">
                                        <input type="checkbox" id="check3" value="150">
                                        <span>150</span>
                                    </label>
                                </li>
                                <li>
                                    <img src="./images/dp03.png" alt="">
                                    <p>Feless费勒斯VR</p>
                                    <label for="check4">
                                        <input type="checkbox" id="check4" value="100">
                                        <span>100</span>
                                    </label>
                                </li>
                                <li>
                                    <img src="./images/dp04.png" alt="">
                                    <p>Feless费勒斯VR</p>
                                    <label for="check1">
                                        <input type="checkbox" id="check1" value="50">
                                        <span>50</span>
                                    </label>
                                </li>
                            </ul>
                            <div class="change-box-r">
                                <p>已购0件商品</p>
                                <b>套餐价</b>
                                <i>¥<span>5299</span></i>
                                <a href="#">加入购物车</a>
                            </div>
                        </div>
                    </div>
                    <div class="good-detail-bottom-r-content">
                        <div class="tab-btn-box">
                            <i class="tab-btn active">相关分类</i>
                            <i class="tab-btn">规格包装</i>
                            <i class="tab-btn">售后与保障</i>
                            <i class="tab-btn">商品评价</i>
                            <i class="tab-btn">手机社区</i>
                        </div>
                        <div class="tab-con-box">
                            <div class="tab" style="display: block;">
                                <p>
                                    分辨率：1920*1080(FHD)<br />
                                    后置摄像头：1200万像素<br />
                                    前置摄像头：500万像素<br />
                                    核 数：其他<br />
                                    频 率：以官网信息为准<br />
                                    品牌： Apple<br />
                                    商品名称：APPLEiPhone 6s Plus<br />
                                    商品编号：1861098<br />
                                    商品产地：中国大陆<br />
                                    商品毛重：0.51kg<br />
                                    热点：指纹识别，Apple Pay，金属机身，拍照神器<br />
                                    系统：苹果（IOS）<br />
                                    像素：1000-1600万品毛重：0.51kg<br />
                                    机身内存：64GB<br />
                                </p>
                                <img src="./images/intro01.png" alt="">
                                <img src="./images/intro02.png" alt="">
                                <img src="./images/intro03.png" alt="">
                            </div>
                            <div class="tab">规格包装</div>
                            <div class="tab">售后与保障</div>
                            <div class="tab">商品评价</div>
                            <div class="tab">手机社区</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="./js/data.js"></script>
    <script>
        // 获取数据
        // console.log(goodData.path); //数组

        // 封装一个选项卡函数！
        function tabFn(btns,tabs) {
            // 给按钮添加事件
            btns.forEach(function (item, index) {
                // item.index = index;
                item.setAttribute('index', index);
                item.onclick = function () {
                    //    console.log(this.getAttribute('index'));

                    // classList className的列表
                    // 以数组形式保存元素上所有的className
                    // console.log(this.classList);

                    // 清除所有按钮上的activeclass
                    for (var i = 0; i < btns.length; i++) {
                        // btns[i].className = 'tab-btn';
                        btns[i].classList.remove('active');
                    }

                    // 切换按钮的样式
                    // this.className = 'tab-btn active';

                    // 添加一个calss，在原有基础之上添加
                    this.classList.add('active');

                    // 清除所有tab显示
                    for (var i = 0; i < tabs.length; i++) {
                        tabs[i].style.display = 'none';
                    }

                    // 让对应的那个tab元素显示
                    tabs[this.getAttribute('index')].style.display = 'block';
                }
            })
        }

        // 商品详情下部-右侧选项卡实现
        goodDetailBottomRTab()
        function goodDetailBottomRTab() {
            var btns = document.querySelectorAll('.good-detail-bottom-r .tab-btn-box i');
            var tabs = document.querySelectorAll('.good-detail-bottom-r .tab-con-box .tab');

            tabFn(btns,tabs);
        }


        // 商品详情下部-左侧选项卡实现
        goodDetailBottomLTab()
        function goodDetailBottomLTab() {
            var btns = document.querySelectorAll('.good-detail-bottom-l .tab-btn-box i');
            var tabs = document.querySelectorAll('.good-detail-bottom-l .tab-con-box .tab');

            tabFn(btns,tabs);
        }


        // 渲染商品详情页面数据
        renderGoodsDetailFn();
        function renderGoodsDetailFn() {
            // 1. 反单引号 ： `` 叫模版字符串
            // 特点：1. 可以回车 - 可以换行
            //       2. 支持字符串拼接
            // var str2 = "今天是"+2023218+"天气"+"晴";

            // 获取数据
            var goodsData = goodData.goodsDetail;
            // console.log(goodsData);

            // 获取显示数据区域
            var goodDetailBox = document.querySelector('.good-picAdetail-r');
            var str = `
                    <h3 class="good-detail-title">
                        ${goodsData.title}
                    </h3>
                    <p class="recommend">${goodsData.recommend}</p>
                    <div class="price-box">
                        <div class="price-box-row">
                            <h5>价&nbsp;&nbsp;&nbsp;&nbsp;格</h5>
                            <p>
                                <i>￥</i>
                                <span class="price">${goodsData.price}</span>
                                <a href="#">降价通知</a>
                                <strong>累计评价 ${goodsData.evaluateNum}</strong>
                            </p>
                        </div>
                        <div class="price-box-row">
                            <h5>促&nbsp;&nbsp;&nbsp;&nbsp;销</h5>
                            <p class="promoteBox">
                                <i class="addPrice">${goodsData.promoteSales.type}</i>
                                <span>${goodsData.promoteSales.content}</span>
                            </p>
                        </div>
                    </div>
                    <div class="support-box">
                        <p>
                            <i>支&nbsp;&nbsp;&nbsp;&nbsp;持</i>
                            <span>${goodsData.support}</span>
                        </p>
                        <p>
                            <i>配&nbsp;送&nbsp;至</i>
                            <span>${goodsData.address}</span>
                        </p>
                    </div>
                    <div class="crumb-box">
                        <div class="choose"></div>
                    </div>
                    <div class="cart-btnbox">
                        <div class="cart-btnbox-l">
                            <input class="numInp" type="text">
                            <a href="#">+</a>
                            <a href="#">-</a>
                        </div>
                        <button class="cart-btn">加入购物车</button>
                    </div>
            `;

            // 将字符串放入到div中显示
            goodDetailBox.innerHTML = str;
        }

        // js渲染 配置项页面部分
        renderCrumbHTMLFn()
        function renderCrumbHTMLFn() {
            // 根据 data.js内部数据 创建dl
            var crumbArr = goodData.goodsDetail.crumbData;
            // console.log(crumbArr);
            // 获取需要添加dl的标签 crumb-box
            var crumbBox = document.querySelector('.crumb-box');
            // 创建dl
            for (var i = 0; i < crumbArr.length; i++) {
                var oDl = document.createElement('dl');
                var oDt = document.createElement('dt');
                oDl.setAttribute('index', i);
                oDt.innerHTML = crumbArr[i].title;
                oDl.appendChild(oDt);

                // 循环crumbArr[i].data 生成dd标签
                for (var j = 0; j < crumbArr[i].data.length; j++) {
                    // 创建dd
                    var oDd = document.createElement('dd');
                    oDd.innerHTML = crumbArr[i].data[j].type;
                    oDd.setAttribute('cPrice', crumbArr[i].data[j].changePrice);
                    oDd.onclick = function () {

                        ddClick.call(this);
                    }
                    oDl.appendChild(oDd);
                }
                crumbBox.appendChild(oDl);
            }
        }


        // 这个数组 - 存的就是用户选中的所有配置！
        // 用数组去控制选择项 - 数组的个数可以规定的
        // 我要一个数组 - arr = [0,0,0,0,0,0]; length和配置项个数一致
        // console.log(goodData.goodsDetail.crumbData.length);

        // 要用数组存 你选中的配置信息！ - 数组的对应下标 存的就是配置项对应内容
        var DDCHOOSEARR = new Array(goodData.goodsDetail.crumbData.length);
        // 给数组的每一项填写默认值 为 0 
        DDCHOOSEARR.fill(0);
        // console.log(arr);

        // 修改价格函数
        function changePriceFn() {
            // 获取到price标签
            var oPriceBox = document.querySelector('.price-box-row .price');

            // 获取选择搭配中的左侧价格元素标签
            var oPriceLBox = document.querySelector('.good-detail-bottom-choose-box-bot p i');

            // 获取要修改价格的元素 - 右侧
            var oPriceRbox = document.querySelector('.change-box-r span');

            // 获取初始价格
            var price = goodData.goodsDetail.price;

            console.log(price);
            // 循环遍历DDCHOOSEARR数组 计算最终价格
            DDCHOOSEARR.forEach(function (item) {
                // console.log(item.changePrice); //要改变的数值
                if (item.changePrice) {
                    price += Number(item.changePrice);
                }
                // price+=Number(item.changePrice);
            })

            // console.log(price);
            oPriceBox.innerHTML = price;
            oPriceLBox.innerHTML = price;
            oPriceRbox.innerHTML = price + CHOOSEPRICE;
        }


        // 给选择区域的checkbox添加点击事件
        checkBoxFn();
        // 保存选择搭配价格
        var CHOOSEPRICE= 0;
        function checkBoxFn(){
            // 1. 获取到选择区域中的所有checkbox元素
            var aCheckBox = document.querySelectorAll('.good-detail-bottom-choose-box-bot input');

            // 获取要修改价格的元素 - 右侧
            var oPriceRbox = document.querySelector('.change-box-r span');

            // 获取到左侧元素中的innerHTML，得到现有价格
            var oPriceLBox = document.querySelector('.good-detail-bottom-choose-box-bot p i');
            
            aCheckBox.forEach(function(item,index){
                // onchange 改变 当表单元素值发生变化的时候 触发
                item.onchange = function(){
                    // 是否选中 - boolean 
                    // console.log(this.checked);
                    // console.log(this.value);

                    // 获取现有的价格
                    // console.log(oPriceLBox.innerHTML);
                    var newPrice = Number(oPriceLBox.innerHTML);

                    CHOOSEPRICE = 0;
                    // 循环所有checkbox- 将选中的checkbox的值累加到newPrice上面
                    aCheckBox.forEach(function(item){
                        if(item.checked){
                            CHOOSEPRICE+=Number(item.value);
                            newPrice+= Number(item.value);
                        }
                    });

                    // console.log(newPrice);
                    oPriceRbox.innerHTML = newPrice;
                }
            });
        }

        // 点击dd事件函数
        function ddClick() {

            // 获取choose标签
            var chooseBox = document.querySelector('.choose');
            // 把上一次新建的span删除掉
            chooseBox.innerHTML = '';

            // 1. 生成一个span 放到上面显示
            // 更改数组 - 把dd内容放入数组对应下标位置
            // console.log(this.innerHTML);

            // 你点击的dd是第几个dl下的？
            var oPar = this.parentNode;

            // 需要获取dl的下标
            // console.log(oPar.getAttribute('index'));
            var dlIndex = oPar.getAttribute('index');

            // 存对象的目的！ 加属性 - 存修改价格
            DDCHOOSEARR[dlIndex] = {
                text: this.innerHTML,
                changePrice: this.getAttribute('cPrice')
            };

            // console.log(DDCHOOSEARR);
            // 获取点击dd的兄弟dd元素
            var aDD = oPar.querySelectorAll('dd');
            // 清除之前添加的字体颜色
            for (var i = 0; i < aDD.length; i++) {
                aDD[i].style.color = '#666';
            }
            // 改变当前dd的字体颜色
            this.style.color = 'red';

            // 根据数组创建对应已选配置span
            for (var i = 0; i < DDCHOOSEARR.length; i++) {
                // 判断 是否该生成span标签
                if (DDCHOOSEARR[i] !== 0) {
                    // console.log('123');
                    var oSpan = document.createElement('span');
                    var X = document.createElement('i');
                    X.innerHTML = 'X';
                    X.setAttribute('num', i);
                    oSpan.className = 'mark';
                    oSpan.innerHTML = DDCHOOSEARR[i].text;
                    oSpan.appendChild(X);
                    chooseBox.appendChild(oSpan);
                }
            }

            ddDeleteFn()


            // 修改价格
            changePriceFn();
        }

        // 给x添加点击事件
        function ddDeleteFn() {
            // 获取x 
            var X = document.querySelectorAll('.choose i');
            // console.log(X);

            X.forEach(function (item, index) {
                item.onclick = function () {
                    // 让自己消失
                    this.parentNode.parentNode.removeChild(this.parentNode);

                    // 获取点击的x的下标
                    var index = this.getAttribute('num');
                    console.log(index);

                    // 同步数组对应下标内容
                    DDCHOOSEARR[index] = 0;

                    // console.log(DDCHOOSEARR);

                    // 修改价格
                    changePriceFn()

                    // 获取对应下标的dl
                    var oDl = document.querySelectorAll('.crumb-box dl')[index];

                    // console.log(oDl);
                    // 获取对应dl下的所有dd
                    var aDD = oDl.querySelectorAll('dd');

                    // 清除dd的字体颜色 - 让dd的默认第一个颜色变红
                    for (var i = 0; i < aDD.length; i++) {
                        aDD[i].style.color = '#666';
                    }
                    aDD[0].style.color = 'red';
                }
            })

        }

        // 放大镜 - 下部图片列表
        picListFn()
        function picListFn() {
            // 获取到ul 
            var ulBox = document.querySelector('.ul-client ul');

            // 创建li - 根据数据个数创建 - 循环
            var arr = goodData.imagessrc;
            // console.log(goodData.imagessrc.length);
            arr.forEach(function (item, index) {
                // console.log(item);
                var oLi = document.createElement('li');
                var oImg = document.createElement('img');
                oImg.src = item.s;
                oLi.appendChild(oImg);
                // 插入对应的li
                ulBox.appendChild(oLi);
            });
        }

        // 切换图片列表展示函数
        picRunFn()
        function picRunFn() {
            var nextBtn = document.querySelector('.next');
            var prevBtn = document.querySelector('.prev');
            // 获取单次移动距离
            var oUl = document.querySelector('.ul-client ul');
            var oLi = oUl.querySelectorAll('li');
            var oLiW = oLi[0].offsetWidth; //76px
            // console.log(oLi.offsetWidth);
            // 单次移动距离
            var onceL = oLiW * 2;
            // 当前移动距离
            var nowL = 0;
            // 获取最大移动距离  -  ul总宽 - 可视区（显示区域的宽）
            var maxL = oLiW * oLi.length - oLiW * 5;

            // console.log(maxL);
            // console.log(maxL);
            nextBtn.onclick = function () {
                nowL += onceL;
                if (nowL >= maxL) {
                    nowL = maxL;
                }
                oUl.style.marginLeft = - nowL + 'px';
            }
            prevBtn.onclick = function () {
                nowL -= onceL;
                console.log(nowL);
                if (nowL <= 0) {
                    nowL = 0;
                }
                oUl.style.marginLeft = - nowL + 'px';
            }
        }


        // 声明图片下标全局变量
        var IMGINDEX = 0;

        // 点击小图 - 切换显示区域图片函数
        picChangeFn();
        function picChangeFn() {
            // 获取li 给它加点击事件
            var aLi = document.querySelectorAll('.ul-client ul li');

            // 获取到所有的图片
            var imgArr = goodData.imagessrc;
            // console.log(imgArr[0].s);

            aLi.forEach(function (item, index) {
                item.onclick = function () {
                    // alert(index);
                    // 切换显示区域的小图片
                    var oSImg = document.querySelector('.s-pic-box img');
                    oSImg.src = imgArr[index].s;

                    // 不能直接 - 修改大图的路径 - 先记录保存小图对应的大图下标。
                    IMGINDEX = index;

                }
            })

        }

        // 面包屑导航实现数据插入
        navPathBind();
        function navPathBind() {
            var navPath = document.querySelector('.nav-path');
            var arr = goodData.path;
            for (var i = 0; i < arr.length; i++) {
                // 判断最后一个数组的对象- 不加span
                if (i === arr.length - 1) {
                    var aNode = document.createElement('a');
                    aNode.innerHTML = arr[i].title;
                    navPath.appendChild(aNode);
                } else {
                    // 创建a标签
                    var aNode = document.createElement('a');
                    var spanNode = document.createElement('span');
                    spanNode.innerHTML = '/';
                    aNode.innerHTML = arr[i].title;
                    aNode.href = arr[i].url;
                    navPath.appendChild(aNode);
                    navPath.appendChild(spanNode);
                }

            }
        }


        bigPicFn()
        // 放大镜实现
        function bigPicFn() {
            // 放大镜事件添加
            var sPicBox = document.querySelector('.s-pic-box');
            sPicBox.onmouseenter = function () {
                // 创建一个蒙板
                var mark = document.createElement('div');
                mark.className = 'mark';
                sPicBox.appendChild(mark);


                // 创建一个大的图片显示区域
                var bigPicBox = document.createElement('div');
                bigPicBox.className = 'b-pic-box';
                var goodPicAdetailL = document.querySelector('.good-picAdetail-l');
                goodPicAdetailL.appendChild(bigPicBox);


                // 获取数据中的图片数组列表
                var imgArr = goodData.imagessrc;
                // console.log(IMGINDEX);
                // 创建大图
                var bigImg = document.createElement('img');
                bigImg.src = imgArr[IMGINDEX].b;
                bigImg.className = 'big-pic';
                bigPicBox.appendChild(bigImg);


                // 当鼠标移动时-改变蒙板位置
                sPicBox.onmousemove = function (event) {
                    // 获取到鼠标的当前位置
                    // console.log(event.offsetX);

                    // console.log(event.pageX);

                    // 获取父级距离左侧距离
                    // console.log(sPicBox.offsetLeft);

                    // 获取蒙板的宽度
                    // console.log(mark.offsetWidth/2);

                    // 让蒙板跟着鼠标走

                    // console.log(sPicBox.offsetTop);
                    // console.log(sPicBox.getBoundingClientRect().top);//相对于可视取位置定位 - 上边距
                    // console.log(sPicBox.getBoundingClientRect().left);//相对于可视取位置定位 - 左边距
                    // console.log(event.clientY);//鼠标相对于可视取的上边距

                    var left = event.clientX - sPicBox.getBoundingClientRect().left - mark.offsetWidth / 2;
                    var top = event.clientY - sPicBox.getBoundingClientRect().top - mark.offsetHeight / 2;

                    // 判断移动范围是否超出放大镜区域
                    if (left <= 0) {
                        left = 0;
                    }
                    if (left >= sPicBox.offsetWidth - mark.offsetWidth) {
                        left = sPicBox.offsetWidth - mark.offsetWidth;
                    }
                    if (top <= 0) {
                        top = 0;
                    }
                    if (top >= sPicBox.offsetHeight - mark.offsetHeight) {
                        top = sPicBox.offsetHeight - mark.offsetHeight
                    }


                    mark.style.left = left + 'px';
                    mark.style.top = top + 'px';


                    //让大图跟着移动位置 - left - top

                    // 计算比例 = (小图区域大小 - 蒙版区域大小) / (大图片 - 大图显示区域大小);

                    var scale = (sPicBox.offsetWidth - mark.offsetWidth) / (bigImg.offsetWidth - bigPicBox.offsetWidth);

                    // console.log(scale);

                    // 通过比例计算大图移动的距离

                    bigImg.style.left = - left / scale + 'px';
                    bigImg.style.top = - top / scale + 'px';

                }

                sPicBox.onmouseleave = function () {
                    sPicBox.removeChild(mark);

                    goodPicAdetailL.removeChild(bigPicBox);

                    // 优化 - 删除鼠标移动和移出事件
                    sPicBox.onmousemove = sPicBox.onmouseleave = null;
                }
            }

        }




    </script>
</body>

</html>